<template>
	<div class="content">
		Home组件--{{ title }}
		<br />
		<a-button type="primary"> antd按钮组件 </a-button>
		<br />
		<br />

		<a-button type="danger" @click="setTitle">按钮的type演示</a-button>
		<br />
		<br />

		<BackwardOutlined style="font-size: 60px; color: blue" />
		<br />
		<br />

		<BackwardOutlined class="icon" />

		<br />
		<br />
		<TeamOutlined class="icon" />

		<br />
		<br />

		<a-button type="primary">
			<template #icon>
				<SearchOutlined />
			</template>搜索
		</a-button>
	</div>
</template>

<script lang="ts">
	import { defineComponent } from "vue";
	//注意使用图标组件首先需要引入
	import {
		BackwardOutlined,
		TeamOutlined,
		SearchOutlined,
	} from "@ant-design/icons-vue";

	export default defineComponent({
		//要挂载图片组件
		components: {
			BackwardOutlined,
			TeamOutlined,
			SearchOutlined,
		},
		data() {
			return {
				title: "antd演示",
			};
		},
		methods: {
			setTitle() : void {
				this.title = "antd事件改变后的title";
			},
		},
	});
</script>

<style lang="scss">
	//cnpm install -D sass-loader node-sass
	.content {
		padding: 40px;
	}

	.icon {
		font-size: 120px;
		color: red !important;
	}
</style>